
<script setup>

import {onMounted, reactive, ref} from "vue";
import {
  getpostbyid,
  getcommentbypostid,
  addcomment,
  addreply,
  cancelike,
  addlike,
  cancelcollect,
  addcollect
} from "@/http/api"
import {ElMessage} from "element-plus";
import router from "@/router";
import { useRoute } from 'vue-router';
import {getUidWithExpiration} from "@/components/cookie.js";

const a =ref()

const url = "/src/assets/img/image/"
const avatarurl = "/src/assets/img/avatar/"




const postinfo = reactive({
  info:{
    avatar: '',
    userId: '',
    name: "",
    postTime: "",
    postId: 0,
    msg: "",
    tagName: "",
    imgs: [],
    likeNum: 0,
    collectNum: 0,
    commentNum: 0,
    isReview: 0,
    tagid: 0,
    like: false,
    collect: false
  }
})

const commentinfo = reactive({
  info:[{
    uid: "",
    name: "",
    avatar: "",
    replyname: '',
    commentid: 0,
    content: "",
    sonComment: [],
    createTime: "",
    isReview: 1,
    isDeleted: 0,
    fatherid: 0,
  }]

})

const info = reactive({
  total: 0,
 pageSize:5,
  pageNum: 1,
  commentcontent:'',
  replycontent:''
})

const route = useRoute();
const postid = ref(route.params.postid);

function getcomment(){
  getcommentbypostid({postid: postid.value,pageIndex: info.pageNum,pageSize: info.pageSize}).then(res => {
    if (res.code === 10000) {
      commentinfo.info = res.data.list
      info.total = res.data.total
      console.log(commentinfo.info)
    }else {
      ElMessage.error(res.msg)
    }
  })
}

onMounted(()=>{
  getpostbyid({postid: postid.value,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      postinfo.info = res.data
      for (let i = 0; i < res.data.imgs.length; i++){
        postinfo.info.imgs[i] = url + res.data.imgs[i]
      }
      console.log(postinfo.info)
    }else {
      ElMessage.error(res.msg)
    }
  })
  getcomment()
})

//修改每页最大数
function handleSizeChange(newSize){
  info.pageSize = newSize;
  getcomment()
}
//跳转到第几页
function handleCurrentChange(newPage){
  info.pageNum = newPage;
  getcomment()
}

const uid = ref(getUidWithExpiration())

function addComment(){
  addcomment({postid: postid.value,content: info.commentcontent,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      ElMessage.success('评论成功')
      getcomment()
    }else {
      ElMessage.error(res.msg)
    }
})
}

function addReply(fatherid,replyuid,commentid){
  if (fatherid ===0){
    addreply({uid:uid.value,content:info.replycontent,fatherid:commentid,replyuid:replyuid}).then(res => {
      if (res.code === 10000) {
        ElMessage.success('评论成功')
        getcomment()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }else {
    addreply({uid:uid.value,content:info.replycontent,fatherid:fatherid,replyuid:replyuid}).then(res => {
      if (res.code === 10000) {
        ElMessage.success('评论成功')
        getcomment()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }
}

function like(){
  addlike({postId: postid.value,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      postinfo.info.like = !postinfo.info.like
      postinfo.info.likeNum ++
    }else {
      ElMessage.error(res.msg)
    }
    })
}

function nolike(){
  cancelike({postId: postid.value,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      postinfo.info.like = !postinfo.info.like
      postinfo.info.likeNum --
    }else {
      ElMessage.error(res.msg)
    }
  })
}

function collect(){
  addcollect({postId: postid.value,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      postinfo.info.collect = !postinfo.info.collect
      postinfo.info.collectNum ++
    }else {
      ElMessage.error(res.msg)
    }
  })
}

function nocollect(){
  cancelcollect({postId: postid.value,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      postinfo.info.collect = !postinfo.info.collect
      postinfo.info.collectNum --
    }else {
      ElMessage.error(res.msg)
    }
  })
}

function deletecomment(son){
  console.log(son.uid)
  console.log(uid.value)
}

</script>

<template>
  <div class="show_main">
    <div class="show_card">
      <div class="post_card">
        <div class="post_header">
          <el-avatar :src="avatarurl+postinfo.info.avatar" size="default" style="width: 60px;height: 60px"></el-avatar>
            <div class="post_name">
              <div class="post_name_container">
                <div class="post_name_text">
                  {{postinfo.info.name}}
                </div>
                <el-tag class="post_tag" type="info">{{ postinfo.info.tagName }}</el-tag>
              </div>
              <div class="post_time">
                {{ postinfo.info.postTime }}
              </div>
            </div>
        </div>
        <div class="post_content_text">
          {{ postinfo.info.msg }}
        </div>
        <div class="post_images_container">
          <div class="post_image" v-for="(item, index) in postinfo.info.imgs" :key="index">
            <el-image
                style="width: 140px; height: 140px;"
                :src="item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="postinfo.info.imgs"
                :initial-index="index"
                fit="cover"
            />
          </div>
        </div>
        <div class="like_collect">
          <div class="de_like" @click="like()" v-if="!postinfo.info.like"><el-icon :size="25" ><Sunny /></el-icon>{{postinfo.info.likeNum}}</div>
          <div class="de_like" @click="nolike()" v-if="postinfo.info.like"><el-icon :size="25" :color="'#ffd04b'"><Sunny /></el-icon>{{postinfo.info.likeNum}}</div>
          <div class="de_collect" @click="collect()" v-if="!postinfo.info.collect"><el-icon :size="25"><Star /></el-icon>{{postinfo.info.collectNum}}</div>
          <div class="de_collect" @click="nocollect()" v-if="postinfo.info.collect"><el-icon :size="25" :color="'#ffd04b'"><Star /></el-icon>{{postinfo.info.collectNum}}</div>
        </div>
      </div>

      <div class="comment_card">
        <div class="comment_input">
          <div style="font-size: 20px;">
            评论
          </div>
          <el-input
              v-model="info.commentcontent"
              style="width: 700px;height: 40px;margin-top: 10px"
              placeholder="这里发布你的评论"
              clearable
          />
          <el-button type="primary" @click="addComment" style="width: 60px;margin-top: 10px">发布</el-button>
        </div>
        <div class="comment_content" v-for="(father, index) in commentinfo.info" :key="index">
          <div class="father_comment">
            <div class="father_comment_header">
              <el-avatar :src="avatarurl+father.avatar" size="25"></el-avatar>
              <div class="father_name">{{ father.name }}</div>
              <div class="father_time">{{ father.createTime }}</div>
              <el-popover placement="right" :width="350" trigger="click">
                <template #reference>
                  <el-button text style="width: 40px">回复</el-button>
                </template>
                <el-input  placeholder="在这里回复" v-model="info.replycontent" />
                <el-button @click="addReply(father.fatherid,father.uid,father.commentid)" type="primary"
                           style=" width: 40px">确定</el-button>
              </el-popover>
            </div>
            <div class="father_comment_content" style="margin-top: 5px">
              <el-text>{{ father.content }}</el-text>
            </div>

          </div>
          <div class="son_comment" v-for="(son, index) in father.sonComment">
            <div class="son_comment_header">
              <el-avatar :src="avatarurl+son.avatar" size="15" style="width: 30px;height: 30px"></el-avatar>
              <div class="son_name">{{ son.name }} </div>
              <div class="son_reply">回复 {{ son.replyname }}</div>
              <div class="son_time">{{ son.createTime }}</div>
              <el-popover placement="right" :width="350" trigger="click">
                <template #reference>
                  <el-button text style="width: 40px">回复</el-button>
                </template>
                <el-input  placeholder="在这里回复" v-model="info.replycontent" />
                <el-button @click="addReply(son.fatherid,son.uid,son.commentid)" type="primary"
                           style=" width: 40px">确定</el-button>
              </el-popover>
            </div>
            <div class="son_comment_content" style="margin-top: 5px">
              <el-text>{{ son.content }}</el-text>
            </div>
          </div>
        </div>

        <!--    分页   size-change 每页最大变化  current-change当前最大变化   layout 功能组件   -->

        <el-pagination

            :page-sizes="[1, 5, 10, 15]"
            :page-size="info.pageSize"
            layout="total, sizes, prev, pager, next, jumper,slot"
            :total="info.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 10px"

        />
      </div>

    </div>
  </div>

</template>

<style scoped>

.show_main{
  width: 100%;
  height: 100%;
  display: flex;
  /*水平居中*/
  justify-content: center;
}

.show_card{
  width: 60%;
  height: 92vh;
}

.post_card{
  width: 100%;
  min-height: 200px;
  margin-top: 20px;
  /*阴影*/
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 10px 40px 10px 40px;
}


.post_header {
  display: flex;
  align-items: flex-start; /* 垂直对齐 */
}

.post_name {
  margin-left: 10px;
  display: flex;
  flex-direction: column; /* 设置为列方向以让名字和标签在上，时间在下 */
}

.post_name_container {
  display: flex; /* 设置为flex布局，使名字和标签并排 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 名字和标签默认从左侧开始 */
}

.post_name_text {
  font-size: 18px;
  /*字体加粗*/
  font-weight: bold;
}

.post_tag {
  margin-left: 10px; /* 给标签添加一些左边距，使其与名字分开 */
  /* 其他标签样式 */
}

.post_time {
  margin-top: 10px; /* 时间和名字/标签之间的间距 */
  font-size: 14px;
  color: #727272;
}

.post_content_text{
  margin-top: 10px;
}


.post_images_container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap; /* 允许子项换行 */
  justify-content: flex-start; /* 水平对齐方式，默认为flex-start */
  align-items: flex-start; /* 垂直对齐方式，默认为stretch */
  /* 可以根据需要添加其他样式，如间距、内边距等 */
}

.post_image {
  margin-right: 10px; /* 根据需要添加右边距 */
  margin-bottom: 10px; /* 根据需要添加下边距 */
  /* 注意不要设置宽度为100%，除非你希望图片填满整个容器宽度 */
}

/* 最后一个图片不需要右边距，可以通过伪类选择器移除 */
.post_images_container .post_image:last-child {
  margin-right: 0;
}


.like_collect{
  margin-top: 20px;
  display: flex;

}

.de_like{
  display: flex;
  align-items: center;
  margin-left: 50px;
  margin-bottom: 20px;
  color: #8d8d8d;
}

.de_collect{
  display: flex;
  align-items: center;
  margin-left: 50px;
  margin-bottom: 20px;
  color: #8d8d8d;
}

.comment_card{
  width: 100%;
  min-height: 300px;
  margin-top: 20px;
  /*阴影*/
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
  border-radius: 10px;
  padding: 20px 40px 10px 40px;
}


.comment_content{
  background-color: rgba(232, 232, 232, 0.4);
  margin-top: 20px;
  border-radius: 10px;
}

.father_comment{
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.father_comment_header {
  display: flex; /* 将元素设置为flex容器 */
  align-items: center; /* 垂直居中容器内的子元素 */
}



.father_name{
  /* 根据需要添加一些样式，比如字体大小和颜色 */
  font-size: 17px;
  margin-left: 15px;
  color: #333;
}
.father_time{
  font-size: 14px;
  margin-left: 15px;
  color: #727272;
}

.son_comment{
  margin: 10px 60px 10px 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.son_comment_header {
  display: flex; /* 将元素设置为flex容器 */
  align-items: center; /* 垂直居中容器内的子元素 */
}


.son_name{
  /* 根据需要添加一些样式，比如字体大小和颜色 */
  font-size: 15px;
  margin-left: 15px;
  color: #333;
}

.son_reply{
  font-size: 12px;
  margin-left: 5px;
  color: #727272;
}

.son_time{
  font-size: 12px;
  margin-left: 15px;
  color: #727272;
}



</style>